<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<!-- 1.按钮和DIV的单击事件（三种绑定方式）
2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
3.登入页面
用户名输入框，
密码输入框，
提交按钮

任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->

		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="Click1()"  >单击按键</button><br>
		<div id="div1" onmouseenter="Onmou1()" onmouseleave="Onmou2()" onmousemove="Onmou3()">
			
		</div><br><br>
	<form action="" method="post">
		<h3>登录页面</h3>
		
		用户名：<input type="text"id="username" value=""/ onfocus="userNameFocus()" onblur="userNameLeave()"><br>
		密 码：<input type="password" id="password"  / onfocus="userPwdFocus()" onblur="userPwdLeave()"><br>
		<button type="button" onclick="Butt()">提交</button>
	</form>
	
	
	<button type="button" onclick="addListener();">添加监听器</button>
	<button type="button" onclick="removeListener();">移除监听器</button>
	
	</body>
	<script type="text/javascript">
		function Click1(){
			console.log('单击了一下')
		}
		function Onmou1(){
			console.log('进入DIV')
		}
		function Onmou2(){
			console.log('离开DIV')
		}
		function Onmou3 (){
			console.log('在DIV内移动了')
		}
		function userNameFocus(){
			console.log('用户在输入名称')
		}
		function userNameLeave(){
			if (username.value=='') {
				alert('用户名为空')
			}
		}
		function userPwdFocus(){
			console.log('用户在输入密码')
		}
		function userPwdLeave(){
			if(password.value==''){
				alert('密码为空')
			}
		}
		function Butt(){
			if (username.value=='' &&password.value!='') {
				alert('用户名为空')
			} else if(username.value!='' &&password.value==''){
				alert('密码为空')
			}else if(username.value=='' &&password.value==''){
				alert('用户名和密码为空')
			}	
		}
		
		function addListener(){
			document.getElementById('div1').addEventListener('click',Onmou3)
		}
		function removeListener(){
			//OK
			document.getElementById('div1').removeEventListener('click',Onmou3)
		}
	</script>
</html>
